<template>
  <div class="user-info-box">
    <ul class="user-info-ul">
      <li class="user-info-item" v-for="(item,index) in userInfoMessage" :key="index">
        <i style="margin-right: 10px" :class="item.font"></i>
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>

export default {
  name: "userInfo",
  data() {
    return {
      userInfoMessage: [{
        name: '我的主页',
        font: 'iconfont icon-yonghufill'
      }, {
        name: '我的消息',
        font: 'iconfont icon-xiaoxi'
      }, {
        name: '我的等级',
        font: 'iconfont icon-dengji'
      }, {
        name: 'VIP会员',
        font: 'iconfont icon-huiyuan'
      }, {
        name: '个人设置',
        font: 'iconfont icon-shezhi'
      }, {
        name: '实名认证',
        font: 'iconfont icon-shimingrenzheng'
      }, {
        name: '退出',
        font: 'iconfont icon-tuichu'
      }],
    }
  },
}
</script>

<style scoped lang="less">
.user-info-box {
  height: 240px;
  width: 160px;
  background-color: #313134FF;
  border-radius: 0 0 10px 10px;
  box-shadow: 5px 5px 20px #000000;
  
  .user-info-ul {
    height: 240px;
    width: 160px;
    border-radius: 0 0 10px 10px;
    
    .user-info-item {
      width: 100%;
      height: 100%/7;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #AEAEAE;
      font-size: 12px;
      transition: all .3s linear;
      border-radius: 10px;
      
      &:hover {
        background-color: #000000;
        transform: translateY(-5px);
        box-shadow: 5px 5px 20px #000000;
        color: #ffffff;
      }
    }
  }
}

@font-face {
  //图标样式
  font-family: "iconfont"; /* Project id 2935731 */
  src: url('//at.alicdn.com/t/font_2935731_hgln72bpbtc.woff2?t=1636882080369') format('woff2'),
  url('//at.alicdn.com/t/font_2935731_hgln72bpbtc.woff?t=1636882080369') format('woff'),
  url('//at.alicdn.com/t/font_2935731_hgln72bpbtc.ttf?t=1636882080369') format('truetype');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-yonghufill:before {
  content: "\e787";
}

.icon-tuichu:before {
  content: "\e638";
}

.icon-shezhi:before {
  content: "\e8b8";
}

.icon-xiaoxi:before {
  content: "\e626";
}

.icon-dengji:before {
  content: "\e621";
}

.icon-huiyuan:before {
  content: "\e8c5";
}

.icon-shimingrenzheng:before {
  content: "\e742";
}

.icon-sousuotianchong:before {
  content: "\e694";
}

</style>
